<template>
	<view class="">
		<scroll-view scroll-y="true" :style="{height:heightXY}">
			<view class="theme-view">
				<textarea placeholder="输入日程主题" placeholder-style="color:#999999;font-size:28rpx" class="textarea"
					v-model="theme" />
			</view>

			<view class="content" style="margin-top: 24rpx;"
				:style="dateList.length!=0 ? 'padding-bottom:'+paddingBottom:''">
				<view class="content-l" @click="clickTime(1)">
					<text class="content-l-t">开始时间</text>
					<view style="display: flex;align-items: center;margin-left: auto;">
						<text class="content-l-ts">{{startTime}}</text>
						<image src="../../../../static/arrow_right.png" style="height:24rpx;width: 12rpx;"></image>
					</view>
				</view>
				<view class="content-l" @click="clickTime(2)">
					<text class="content-l-t">结束时间</text>
					<view style="display: flex;align-items: center;margin-left: auto;">
						<text class="content-l-ts">{{endTime}}</text>
						<image src="../../../../static/arrow_right.png" style="height:24rpx;width: 12rpx;"></image>
					</view>
				</view>
				<view class="content-l">
					<text class="content-l-t">全天</text>

					<image :src="openingFlag ? opening:closeing" style="width: 102rpx;height: 64rpx;margin-left: auto;"
						@click="openingFlag=!openingFlag"></image>

				</view>

				<view class="content-l" @click="clickTime(3)">
					<text class="content-l-t">日程提醒</text>
					<view style="display: flex;align-items: center;margin-left: auto;">
						<text :class="remindTimeId==-1 ? 'content-l-ts':'content-l-tt'">{{remindTime}}</text>
						<image src="../../../../static/arrow_right.png" style="height:24rpx;width: 12rpx;"></image>
					</view>
				</view>

				<view class="content-l" @click="clickTime(4)">
					<text class="content-l-t">参与人类型</text>
					<view style="display: flex;align-items: center;margin-left: auto;">
						<text :class="joinerId==-1 ? 'content-l-ts':'content-l-tt'">{{joiner}}</text>
						<image src="../../../../static/arrow_right.png" style="height:24rpx;width: 12rpx;"></image>
					</view>
				</view>

				<view class="content-l" @click="clickTime(5)">
					<text class="content-l-t">所属案件</text>
					<view style="display: flex;align-items: center;margin-left: auto;">
						<text class="content-l-ts" v-if="dateList.length==0">请选择</text>
						<text class="content-l-ts" v-if="dateList.length!=0">重新选择</text>
						<image src="../../../../static/arrow_right.png" style="height:24rpx;width: 12rpx;"></image>
					</view>
				</view>

				<view class="case-view" v-if="dateList.length!=0">
					<view style="height: 20rpx;"></view>
					<view style="display: flex;align-items: center;">
						<image src="../../../../static/phone/phone_case_list_img.png"
							style="width: 48rpx;height: 48rpx;margin-left: 32rpx;"></image>
						<text class="case-view-top-t1">{{dateList[0].custName}}</text>
						<text class="case-view-top-t1 case-view-top-t2">编号: {{dateList[0].no}}</text>
					</view>

					<view class="case-view-top-t3">
						{{dateList[0].content}}
					</view>

					<view style="display: flex;align-items: center;margin-top: 16rpx;">
						<text class="case-view-top-t1" style="margin-left: 32rpx;">状态：</text>
						<text class="case-view-top-t1"
							style="color: #2DA9C5;">{{dateList[0].status.code=='4' ? dateList[0].bizStatus : dateList[0].status.desc}}</text>
					</view>
				</view>

			</view>
		</scroll-view>


		<view class="view-bottom">
			<view class="view-bottom-s">
				<view class="view-bottom-b" @click="saveIt">
					确定
				</view>
			</view>

		</view>

		<dateTimeSelect ref="myPicker" @submit="handleSubmit" :start-year="2023" :end-year="2030"/>

		<common-choose v-if="showChoose" :chooseList="chooseList" :chooseResult="chooseResult" :chooseTag="chooseTag"
			@gotIt="gotIt"></common-choose>


		<view class="zhezhao" v-if="showSift">

			<view class="zhezhao-view-bottom">
				<scroll-view scroll-y="true" style="height: 644rpx;">
					<view class="zhezhao-title-view" v-if="remindTimeList.length>0">
						日程提醒
					</view>
					<view class="zhezhao-sift-listview">
						<view v-for="(item,index) in remindTimeList" :key="index"
							:class="item.sel ? 'zhezhao-sift-item-foucs':'zhezhao-sift-item'" @click="sfitField(index)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>

				<view class="zhezhao-view-bottom-s">
					<view class="zhezhao-view-bottom-c" @click="cancelSift">
						重置
					</view>
					<view class="zhezhao-view-bottom-b" @click="goSift">
						确定
					</view>
				</view>

			</view>
		</view>


	</view>

</template>

<script>
	import dateTimeSelect from "@/components/dateTimeSelect/dateTimeSelect.vue"
	import commonChoose from '@/pages/phone/common/commonChoose.vue'
	import verify from '@/pages/utils/verifyUtils.js'
	let app = ''
	
	export default {
		components: {
			dateTimeSelect,
			commonChoose
		},
		data() {
			return {
				id: '',
				role: '',
				roleUrl: '',
				theme: '',
				heightXY: '',
				dateSelectIndex: 0,
				dateType: 'datetime',
				startTime: '请选择',
				startTimeId: '',
				endTime: '请选择',
				endTimeId: '',
				timeTag: 0,
				openingFlag: false, //是否全天开启
				opening: '../../../../static/phone/opening.png',
				closeing: '../../../../static/phone/closeing.png',

				remindTime: '请选择',
				remindTimeList: [],
				remindTimeId: -1,
				joiner: '请选择',
				joinerList: [],
				joinerId: -1,

				caseDate: '请选择',
				dateList: [],
				paddingBottom: '32rpx',


				showChoose: false,
				chooseList: [],
				chooseResult: '',
				chooseTag: "",

				caseId: '',


				showSift: false,
				
				detail:null,
			}
		},
		onLoad(options) {
			let title = ''
			let _this = this
			app = getApp()
			_this.setChooseData()
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})

			_this.tag = options.tag
			if (options.tag == 'add') {
				title = '新增日程'
			}
			if (options.tag == 'edit') {
				title = '编辑日程',
				_this.detail = JSON.parse(options.detail)
				
				_this.setData()
			}
			uni.setNavigationBarTitle({
				title: title
			})

			let needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			if (needAdapt) {
				_this.heightXY = (app.globalData.windowHeight - 88) * 2 + 'rpx'
			} else {
				_this.heightXY = (app.globalData.windowHeight - 54) * 2 + 'rpx'
			}

			
		},
		onShow() {
			let items = uni.getStorageSync("caseBelongs")
			console.log(items)
			if (items != null && items != '' && items != undefined) {
				this.dateList = []
				this.dateList.push(items)
				uni.setStorageSync("caseBelongs", null)
			}
		},
		mounted() {

		},
		methods: {
			
			setData(){
				let _this = this
				_this.theme = _this.detail.title
				_this.startTimeId = _this.detail.beginTime
				_this.endTimeId = _this.detail.endTime
				
				let reg =/(\d{4})\-(\d{2})\-(\d{2})/;
				_this.startTime = _this.startTimeId.replace(reg,"$1年$2月$3日");
				_this.endTime = _this.endTimeId.replace(reg,"$1年$2月$3日");
				let allDay = _this.detail.allDay
				if(allDay.code=='1'){
					_this.openingFlag = true
				}else{
					_this.openingFlag = false
				}
				
				let tipsTimes = _this.detail.tipsTimes
				let remindList = _this.remindTimeList
				
				for (var i = 0; i < remindList.length; i++) {
					for (var j = 0; j < tipsTimes.length; j++) {
						if(remindList[i]['id']==tipsTimes[j]['code']){
							remindList[i]['sel'] = true
						}

					}
				}
				_this.remindTimeList = remindList
				
				let remindTimeId = ''
				for (var j = 0; j < tipsTimes.length; j++) {
					remindTimeId = tipsTimes[j]['code'] + ',' + remindTimeId
				}
				if (remindTimeId.length > 1) {
					remindTimeId = remindTimeId.substring(0, remindTimeId.length - 1)
				}
				_this.remindTimeId = remindTimeId
				
				
				
				if (_this.detail.tips.length > 15) {
					_this.remindTime = _this.detail.tips.substring(0, 15) + '...'
				} else {
					_this.remindTime = _this.detail.tips
				}
				
				let joinType = _this.detail.joinType
				_this.joiner = joinType.desc
				_this.joinerId = joinType.code
				
				let cases = _this.detail.cases
				_this.dateList = []
				_this.dateList.push(cases)
				
				_this.id = _this.detail.id
			
			},

			setChooseData() {
				let _this = this
				_this.joinerList = [{
						id: 0,
						name: '全体参与人',
						value: '全体参与人'
					},
					{
						id: 1,
						name: '仅承办律师',
						value: '仅承办律师'
					},
				]
				_this.remindTimeList = [{
						id: 0,
						name: '无提醒',
						value: '无提醒'
					},
					{
						id: 1,
						name: '日程开始时提醒',
						value: '日程开始时提醒'
					},
					{
						id: 2,
						name: '15分钟前提醒',
						value: '15分钟前提醒'
					},
					{
						id: 3,
						name: '30分钟前提醒',
						value: '30分钟前提醒'
					},
					{
						id: 4,
						name: ' 一小时前提醒',
						value: ' 一小时前提醒'
					},
					{
						id: 5,
						name: '一天前提醒',
						value: '一天前提醒'
					},
					{
						id: 6,
						name: '一天前提醒',
						value: '一天前提醒'
					},
					{
						id: 7,
						name: '1天前9点提醒',
						value: '1天前9点提醒'
					},
					{
						id: 8,
						name: '2天前9点提醒',
						value: '2天前9点提醒'
					},
				]

				for (var i = 0; i < _this.remindTimeList.length; i++) {
					_this.remindTimeList[i]['sel'] = false
				}
			},


			/**
			 * 点击确定
			 */
			async saveIt() {
				let _this = this
				console.log(_this.startTimeId)
				if (!verify.isNotEmpty(_this.theme)) {
					_this.showToastEmpty("日程主题不能为空!")
					return
				}
				if (!verify.isNotEmpty(_this.startTimeId)) {
					_this.showToastEmpty("请选择开始时间!")
					return
				}

				if (!verify.isNotEmpty(_this.endTimeId)) {
					_this.showToastEmpty("请选择结束时间!")
					return
				}
				if (_this.remindTimeId == -1) {
					_this.showToastEmpty("请选择日程提醒!")
					return
				}
				if (_this.joinerId == -1) {
					_this.showToastEmpty("请选择参与人类型!")
					return
				}
				if (_this.dateList.length === 0) {
					_this.showToastEmpty("请选择所属案件!")
					return
				}
			
				uni.showLoading({
					title: '正在提交...'
				})

				let data = {
					caseId: _this.dateList[0]['id'],
					title: _this.theme,
					beginTime: _this.startTimeId,
					endTime: _this.endTimeId,
					allDay: _this.openingFlag ? '1' : '0',
					joinType: _this.joinerId,
					content:'无',
					tipsTimes:_this.remindTimeId
				}
				
			

				let method = 'POST'
				if (_this.tag == 'edit') {
					_this.$set(data, 'id', _this.id)
					method = 'PUT'
				}
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseTodo`,
					method: method,
					data: data
				})
				uni.hideLoading()
				if (res.data.code == 200) {
					uni.showToast({
						title: '提交成功!',
						icon: "success",
						duration: 1500
					})
					uni.setStorageSync("schedele",'add')
					setTimeout(function() {
						uni.navigateBack({
							delta: -1
						})
					}, 1500);
				}
			},

			/**
			 * 事件点击
			 * tag:1 开始时间  tag:2 结束时间  tag:3 日程提醒 4 参与人  5 所属案件
			 */
			clickTime(tag) {
				let _this = this
				if (tag == 1 || tag == 2) {
					_this.timeTag = tag
					_this.$refs.myPicker.show();
				} else if (tag == 3) {
					// _this.chooseTag = 'remid'
					// _this.chooseList = _this.remindTimeList
					// _this.chooseResult = _this.remindTime
					// _this.$nextTick(()=>{
					// 	_this.showChoose = true
					// })
					_this.showSift = true
				} else if (tag == 4) {
					_this.chooseTag = 'join'
					_this.chooseList = _this.joinerList
					_this.chooseResult = _this.joiner
					_this.$nextTick(() => {
						_this.showChoose = true
					})
				} else if (tag == 5) {
					uni.navigateTo({
						url: './caseBelongs'
					})
				}

			},

			handleSubmit(e) {
				// {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
				// console.log(e);
				var date = e.year + '年' + e.month + '月' + e.day + '日'
				var time = e.hour + ':' + e.minute
				if (this.timeTag == 1) {
					this.startTime = date + '' + time
					this.startTimeId = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
				} else if (this.timeTag == 2) {
					this.endTime = date + '' + time
					this.endTimeId = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
				}


			},

			/**
			 * 选择后赋值
			 */
			gotIt(val) {
				// console.log(val)
				let _this = this
				_this.showChoose = false
				let tag = val.split(";")[0]
				let index = val.split(";")[1]
				if (tag == 'remid') {
					_this.remindTime = _this.remindTimeList[index]['value']
					_this.remindTimeId = _this.remindTimeList[index]['id']
				} else if (tag == 'join') {
					_this.joiner = _this.joinerList[index]['value']
					_this.joinerId = _this.joinerList[index]['id']
				}
			},

			showToastEmpty(val) {
				uni.showToast({
					title: `${val}`,
					icon: 'none'
				})
			},

			/**
			 * @param {Object} 日程提醒
			 */
			sfitField(index) {
				let _this = this
				// console.log(index)
				var item = _this.remindTimeList[index];
				item.sel = !item.sel
				_this.remindTimeList.splice(index, 1, item);
				// _this.remindTimeList[index]['sel'] = !_this.remindTimeList[index]['sel']
			},

			/**
			 * 获取日程提醒结果
			 */
			goSift() {
				let _this = this
				_this.showSift = false

				let remindTime = ''
				let remindTimeId = ''
				for (var i = 0; i < _this.remindTimeList.length; i++) {
					if (_this.remindTimeList[i]['sel']) {
						remindTime = _this.remindTimeList[i]['name'] + ',' + remindTime
						remindTimeId = _this.remindTimeList[i]['id'] + ',' + remindTimeId
					}
				}

				if (remindTime.length > 1) {
					remindTime = remindTime.substring(0, remindTime.length - 1)
				}
				if (remindTimeId.length > 1) {
					remindTimeId = remindTimeId.substring(0, remindTimeId.length - 1)
				}
				if (remindTime.length > 15) {
					_this.remindTime = remindTime.substring(0, 15) + '...'
				} else {
					_this.remindTime = remindTime
				}


				_this.remindTimeId = remindTimeId
			},
			
			cancelSift(){
				let list = this.remindTimeList
				for (var i = 0; i < list.length; i++) {
					let item = list[i]
					item.sel = false
					this.remindTimeList.splice(i, 1, item);
				
				}
				
			},
			
			
			getNowTime () {
			  let now = new Date();
			  let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
			  let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
			  let today = now.getDate(); //获取当前日(1-31)
			  let hour = now.getHours(); //获取当前小时数(0-23)
			  let minute = now.getMinutes(); //获取当前分钟数(0-59)
			  let second = now.getSeconds(); //获取当前秒数(0-59)
			  let nowTime = ''
			  nowTime = year + '-' + this.fillZero(month) + '-' + this.fillZero(today) + ' ' + this.fillZero(hour) + ':' +
			    this.fillZero(minute) + ':' + this.fillZero(second)
			  return nowTime
			},
			
			fillZero (str) {
			  var realNum;
			  if (str < 10) {
			    realNum = '0' + str;
			  } else {
			    realNum = str;
			  }
			  return realNum;
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.theme-view {
		height: 216rpx;
		background-color: #ffffff;
	}

	.textarea {
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		font-size: 28rpx;
		color: #333333;
		line-height: 20rpx;
		width: 686rpx;
		height: 168rpx;
	}

	.content {
		padding-left: 32rpx;
		padding-right: 32rpx;
		background-color: #ffffff;
	}

	.content-l {
		height: 108rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx #eeeeee solid;
	}

	.content-l-t {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}

	.content-l-ts {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-right: 16rpx;
	}

	.content-l-tt {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-right: 16rpx;
	}

	.view-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #e1e1e1;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}

	.view-bottom-s {
		height: 108rpx;
		display: flex;
		align-items: center;
	}

	.view-bottom-b {
		width: 686rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}

	.case-view {
		width: 686rpx;
		height: 234rpx;
		border-radius: 4rpx;
		border: 1px solid #EEEEEE;

	}

	.case-view-top-t1 {
		margin-left: 12rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;

	}

	.case-view-top-t2 {
		color: #999999;
		margin-left: auto;
		margin-right: 32rpx;
	}

	.case-view-top-t3 {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}
</style>

<style scoped lang="scss">
	.zhezhao {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9999;
		position: fixed;
		left: 0;
		top: 0;
		overflow: scroll;
		// padding-top: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zhezhao-view-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-radius: 8px 8px 0px 0px;

	}

	.zhezhao-view-bottom-s {
		height: 108rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx #eeeeee solid;
		background-color: #ffffff;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}

	.zhezhao-view-bottom-c {
		width: 260rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #2DA9C5;
		margin-left: 32rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zhezhao-view-bottom-b {
		width: 394rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}

	.zhezhao-title-view {
		height: 114rpx;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}

	.zhezhao-sift-listview {
		display: flex;
		flex-wrap: wrap;
	}

	.zhezhao-sift-item {
		width: 212rpx;
		height: 72rpx;
		background: #F7F7F7;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 400;
		color: #18252C;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 26rpx;
		margin-bottom: 32rpx;
	}

	.zhezhao-sift-item-foucs {
		width: 212rpx;
		height: 72rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 26rpx;
		margin-bottom: 32rpx;
	}
</style>
